<template>
<div class="user-content">
  <div class="user-left">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="handleMessage('/user/pscenter')">
        <i class="el-icon-menu"></i>
        <span slot="title">个人资料</span>
      </el-menu-item>
      <el-menu-item index="2" @click="handleMessage('/user/mscenter')">
        <i class="el-icon-document"></i>
        <span slot="title">留言信息</span>
      </el-menu-item>
      <el-menu-item index="3" @click="handleMessage('/user/option')">
        <i class="el-icon-setting"></i>
        <span slot="title">设置</span>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="user-right">
    <router-view/>
  </div>
</div>
</template>

<script>
export default{
  name: 'usercontent',
  data () {
    return {
      
    }
  },
  methods: {
    handleMessage(path) {
      if (this.$route.path !== path) {
        this.$router.replace(path)
      }
    }
  }
}
</script>

<style scoped>
.user-content{
  margin-top: 15px;
  display: flex;
}
.el-menu-vertical-demo{
  margin-right: 15px;
}
.user-left{
  flex: 2;
}
.user-right{
  flex: 8;
}
</style>
